<template>
	<view class="table_body">
		<!-- row行数 -->
		<block v-for="(rowItem, rowIndex) in pbList" :key="rowIndex">
			<view class="table_tr flex-row">
				<view class="carTd flex-xy-center">
					<text>{{ rowItem.carNo?rowItem.carNo:'暂无车辆' }}</text>
					<text v-if="rowItem.carSource != 1 && rowItem.carSource != 99" style="color: #1673FF;">{{ rowItem.carSource | carSource }}</text>
				</view>
				<!-- column列数 -->
				<block v-for="(columnItem, columnIndex) in rowItem.dateArray" :key="columnIndex">
					<!-- 当日订单数小于2 -->
					<template v-if="columnItem.dateOrders.length < 2">
						<view
							class="pbTd flex-xy-center"
							:class="[
								{ active1: columnItem.type == 1 },
								{ active2: columnItem.type == 2 },
								{ active3: columnItem.type == 3 || columnItem.type == 4 || columnItem.type == 6 },
								{ active5: columnItem.type == 5 }
							]"
							@click.stop="goDetail(columnItem.dateOrders)"
						>
							<!-- 存在一条数据 -->
							<template v-if="columnItem.dateOrders.length == 1">
								<!-- 数据是订单 -->
								<template
									v-if="
										columnItem.dateOrders[0].type == 1 ||
											columnItem.dateOrders[0].type == 2 ||
											columnItem.dateOrders[0].type == 5
									"
								>
									<template v-if="columnItem.timestamp === columnItem.dateOrders[0].endTimeStamp">
										<view class="flex-row-center">
											<text class="orderSource">{{ columnItem.dateOrders[0].orderSource | pbOrderSource }}</text>
											<text class="orderSource" style="margin-left: 5rpx;" v-if="columnItem.type == 1">
												{{ columnItem.dateOrders[0].isPlatoon | isPlatoon }}
											</text>
										</view>
										<image
											v-if="columnItem.dateOrders[0].isItAWarning == 1"
											style="width: 20rpx;height: 20rpx; margin-top: 10rpx;"
											src="/static/other/warning.png"
											mode="aspectFill"
										></image>
									</template>
								</template>
								<!-- 数据不是订单 -->
								<template v-else>
									<!-- 借调记录 -->
									<text v-if="columnItem.dateOrders[0].type === 3" class="otherSource">借出</text>
									<!-- 调拨记录 -->
									<text v-else-if="columnItem.dateOrders[0].type === 4" class="otherSource">调出</text>
									<!-- 下线记录 -->
									<text v-else-if="columnItem.dateOrders[0].type === 6" class="otherSource">
										{{ columnItem.dateOrders[0].reason }}
									</text>
								</template>
							</template>
						</view>
					</template>
					<!-- 当订单数大于2时,背景界面 -->
					<template v-else>
						<view
							class="pbTd flex-xy-center"
							:class="{ active6: columnItem.dateOrders[0].conflictOrNot == 1 }"
							:style="{
								background:
									columnItem.dateOrders[0].conflictOrNot === 1
										? ''
										: `linear-gradient(90deg, ${colorList[columnItem.dateOrders[0].type]} 0%, ${
												colorList[columnItem.dateOrders[columnItem.dateOrders.length - 1].type]
										  } 100%)`
							}"
							@click.stop="goDetail(columnItem.dateOrders)"
						>
						<!-- 第一个单子是订单 -->
							<template
								v-if="
									columnItem.dateOrders[0].type == 1 ||
										columnItem.dateOrders[0].type == 2 ||
										columnItem.dateOrders[0].type == 5
								"
							>
								<template v-if="columnItem.timestamp === columnItem.dateOrders[0].endTimeStamp">
									<view class="flex-row-center">
										<text class="orderSource">{{ columnItem.dateOrders[0].orderSource | pbOrderSource }}</text>
									</view>
									<text class="orderNum" style="margin-top: 10rpx;">{{ columnItem.dateOrders.length }}</text>
									<image
										v-if="columnItem.dateOrders[0].isItAWarning == 1"
										style="width: 20rpx;height: 20rpx; margin-top: 10rpx;"
										src="/static/other/warning.png"
										mode="aspectFill"
									></image>
								</template>
							</template>

							<!-- 第一个单子是非订单 -->
							<template v-else>
								<text class="orderNum" style="margin-top: 10rpx;">{{ columnItem.dateOrders.length }}</text>
								<!-- 借调记录 -->
								<text v-if="columnItem.dateOrders[0].type === 3" class="otherSource">借出</text>
								<!-- 调拨记录 -->
								<text v-else-if="columnItem.dateOrders[0].type === 4" class="otherSource">调出</text>
								<!-- 下线记录 -->
								<text v-else-if="columnItem.dateOrders[0].type === 6" class="otherSource">
									{{ columnItem.dateOrders[0].reason }}
								</text>
							</template>
						</view>
					</template>
				</block>
			</view>
		</block>
	</view>
</template>

<script>
import tableColumn from './table-column.vue';
import moment from '@/utils/moment.js';
export default {
	name: '',
	components: {
		tableColumn
	},
	data() {
		return {
			showDetail: false,
			orders: [],
			colorList: {
				1: '#FF8F00',
				2: '#23BCCA',
				3: '#D3DDE7',
				4: '#D3DDE7',
				5: '#369AFE',
				6: '#D3DDE7'
			}
		};
	},
	props: {
		tableHeadList: {
			type: Array,
			default() {
				return [];
			}
		},
		rosteringVos: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	computed: {
		dateList() {
			return this.tableHeadList;
		},
		carList() {
			return this.rosteringVos;
		},
		pbList() {
			let pbList = this.configPbList();
			return pbList;
		}
	},
	mounted() {},
	methods: {
		goDetail(orders) {
			this.$emit('goDetail', orders);
		},
		// 根据接口数据重构数据格式展示
		configPbList() {
			// 日历日期
			let columnDates = this.dateList;
			let resultCarList = [];
			for (let carObj of this.carList) {
				for (let dateObj of columnDates) {
					const timestamp = dateObj.timestamp;
					//列->日期
					// 配置订单数据
					let tmpObj = this.getDateCarOrder(timestamp, carObj);
					// dateObj.dateOrders = tmpObj.dateOrders;
					// dateObj.type = tmpObj.type;
					let resultDateObj = {
						timestamp: dateObj.timestamp,
						type: tmpObj.type,
						dateOrders: tmpObj.dateOrders
					};

					// if (timestamp == 1685894400000 && carObj.carNo == '琼A2MY90') {
					// 	console.log('琼A2MY9 - 05号-tmpObj', tmpObj);
					// 	// console.log('琼A2MY9 - 05号-dateObj.dateOrders', dateObj.dateOrders, dateObj.type);
					// 	// console.log('琼A2MY9 - 05号-dateObj', dateObj);
					// 	console.log('琼A2MY9 - 05号-dateObj.dateOrders', obj.aa);
					// 	console.log('琼A2MY9 - 05号-dateObj', obj);

					// }
					carObj.dateArray.push(resultDateObj);
				}
				resultCarList.push(carObj);
			}
			console.log('处理后的数据', resultCarList);
			return resultCarList;

			// 日历日期
			//    return  this.carList.map((carObj) => {
			// 	//行->车辆
			// 	carObj.dateArray = this.dateList.map((dateObj) => {
			// 		const timestamp = dateObj.timestamp;
			// 		//列->日期
			// 		// 配置订单数据
			// 		  let tmpObj = this.getDateCarOrder(timestamp, carObj);
			// 		  dateObj.dateOrders = tmpObj.dateOrders;
			// 		  dateObj.type = tmpObj.type;
			// 		  if(timestamp == 1685894400000 && carObj.carNo=='琼A2MY90'){
			// 		  	console.log('琼A2MY9 - 05号-tmpObj', tmpObj);
			// 			console.log('琼A2MY9 - 05号-dateObj.dateOrders', dateObj.dateOrders, dateObj.type);
			// 		  	console.log('琼A2MY9 - 05号-dateObj', dateObj);

			// 		  }
			// 		  return dateObj;
			// 	});
			//     if(carObj.carNo == '琼A2MY90') {
			// 		console.log('琼A2MY9 - 05号-carObj',carObj.dateArray);
			// 	}
			// 	return carObj;
			// });
			// console.log('排版数据---', pbList);
		},

		// 获取车辆在指定时间中的排班情况
		getDateCarOrder(timestamp, carObj) {
			let tmpObj = {
				dateOrders: [],
				type: 0
			};

			if (carObj.returnOrder.length > 0) {
				//已还车订单
				carObj.returnOrder.forEach(order => {
					if (timestamp >= order.startTimeStamp && timestamp <= order.endTimeStamp) {
						//在时间范围内
						this.$set(order, 'type', 5);
						tmpObj.dateOrders.push(order);
						tmpObj.type = 5;
					}
				});
			}

			if (carObj.vehicleOrder.length > 0) {
				//用车订单
				carObj.vehicleOrder.forEach(order => {
					if (timestamp >= order.startTimeStamp && timestamp <= order.endTimeStamp) {
						//在时间范围内
						this.$set(order, 'type', 2);
						tmpObj.dateOrders.push(order);
						tmpObj.type = 2;
					}
				});
			}

			if (carObj.bookingOrder.length > 0) {
				//预订订单
				carObj.bookingOrder.forEach(order => {
					if (timestamp >= order.startTimeStamp && timestamp <= order.endTimeStamp) {
						//在时间范围内
						this.$set(order, 'type', 1);
						tmpObj.dateOrders.push(order);
						tmpObj.type = 1;
					}
				});
			}

			if (carObj.seconded.length > 0) {
				console.log('借出--', carObj.seconded);
				//借调记录
				carObj.seconded.forEach(order => {
					let startTimeStamp = moment(order.secondmentStartTime)
						.startOf('day')
						.valueOf();

					let endTimeStamp =
						moment(order.secondmentEndTime)
							.startOf('minute')
							.valueOf() - 1 || startTimeStamp + 31536000000;
					if (timestamp >= startTimeStamp && timestamp <= endTimeStamp) {
						// 在时间范围内
						this.$set(order, 'type', 3);
						tmpObj.dateOrders.push(order);
						tmpObj.type = 3;
					}
				});
			}

			if (carObj.secondment.length > 0) {
				//调拨记录
				carObj.secondment.forEach(order => {
					let startTimeStamp = moment(order.secondmentStartTime)
						.startOf('day')
						.valueOf();
					let endTimeStamp =
						moment(order.secondmentEndTime)
							.startOf('minute')
							.valueOf() - 1 || startTimeStamp + 31536000000;
					if (timestamp >= startTimeStamp && timestamp <= endTimeStamp) {
						//在时间范围内
						this.$set(order, 'type', 4);
						tmpObj.dateOrders.push(order);
						tmpObj.type = 4;
					}
				});
			}

			if (carObj.carOff.length > 0) {
				//下线记录
				carObj.carOff.forEach(order => {
					let startTimeStamp = moment(order.offLineTime)
						.startOf('day')
						.valueOf();
					let endTimeStamp =
						moment(order.onLineTime)
							.startOf('minute')
							.valueOf() - 1 || startTimeStamp + 31536000000;
					if (timestamp >= startTimeStamp && timestamp <= endTimeStamp) {
						//在时间范围内
						this.$set(order, 'type', 6);
						tmpObj.dateOrders.push(order);
						tmpObj.type = 6;
					}
				});
			}
			return tmpObj;
		}
	}
};
</script>

<style lang="scss" scoped>
@import './pbTable.css';
.table_body {
}
.table_tr {
	width: 100%;
	height: 140rpx;
	border-bottom: 1rpx #f0f0f0 solid;
	.carTd {
		height: 100%;
		width: 208rpx;
		border-right: 1rpx #f0f0f0 solid;
		background-color: #fff;
		font-size: 24rpx;
	}
	.pbTd {
		height: 100%;
		width: 120rpx;
		background-color: #fff;
		border-right: 1rpx #f0f0f0 solid;
		&.active1 {
			background-color: #ff8f00;
		}
		&.active2 {
			background-color: #23bcca;
		}
		&.active3 {
			background-color: #d3dde7;
		}
		&.active5 {
			background-color: #369afe;
		}
		&.active6 {
			background-color: #f5242f;
		}
		.orderSource {
			font-size: 24rpx;
			color: #fff;
		}
		.otherSource {
			margin-top: 10rpx;
			font-size: 24rpx;
			color: #5b6b7b;
		}
		.orderNum {
			width: 30rpx;
			height: 30rpx;
			line-height: 30rpx;
			border-radius: 15rpx;
			text-align: center;
			background-color: #fff;
			color: #333;
			font-size: 22rpx;
		}
	}
}
</style>
